import React,{memo} from 'react';
import {SongsCoverStyled} from "./style";
import {NavLink} from "react-router-dom";
import {getCount,getSizeImage} from "../../utils/data-format";

//该模块是每一个歌单的封面的item
export default memo(function SongsCover(props) {
  const {message}=props;
    return (
        <SongsCoverStyled>
          <div className="cover_top">
            <NavLink
                to="/discover/recommend"
                className="songs_cover">
            <div className="cover_top_bg" title={message.name}/>
            <img alt="加载中" src={getSizeImage(message.picUrl,140)}/>

            </NavLink>
            <div className="cover_bofang">
              <span className="cover_bofang_left">
                
                {
                  getCount(message.playCount)
                }
              </span>
              <span className="cover_bofang_right">
                
              </span>

            </div>
          </div>




          <div className="cover_bottom">
            <NavLink className="cover_bottom_a" to="/discover/recommend">
              {message.name}
            </NavLink>
          </div>

          {
            message.myMessage?
                <div className="cover_sub">
              <p>
                {message.myMessage}
              </p>
              <button>
                不感兴趣
              </button>
            </div>:<></>
          }


        </SongsCoverStyled>
    );
  }
)
